<template>
    <div>
       <form class="form-horizontal" name="testForm">

         <div class="form-group">
            <label>自动更新信息</label>
             <input type="text" class="form-control"  v-model="message" placeholder="input your name" @change="logInfo($event)">
             <span>Welcome {{message}} to this website</span>
          </div>


           <div class="form-group">
             <input type="text" class="form-control" v-model="number" placeholder="input a number"   number>
           <span>you input a number: {{number}}</span>
          </div>
          



          <div class="form-group">
              <label class="checkbox-inline">
                  <input type="checkbox" v-model="checkinfo">
              </label>

           <span>{{checkinfo}}</span>
          </div>
          

            <div class="form-group">
                <label class="checkbox-inline">
                    <input type="checkbox" v-model="bizLines" id="flash" value="flash"> 快车
                </label>

                <label class="checkbox-inline">
                    <input type="checkbox" v-model="bizLines" id="bus" value="bus">巴士
                </label>

                <label class="checkbox-inline">
                    <input type="checkbox" v-model="bizLines" id="train" value="train">火车
                </label>

               <br/>
               <span>多个checkbox  {{bizLines|json}}</span>
          </div>
          
       </form>
    </div>
</template>
<style>
    body{
        background-color:#fefefe;
    }
</style>
<script>
    export default{
        data(){
            return{
                "message":'david',
                "checkinfo":true,
                "bizLines":[],
                "number":0
            }
        },
        methods:{
            "logInfo":function(event){
                console.log(event.target.value);
                console.log(this.message);

            }
        }
    }
</script>
